<template>
    <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
        <!-- 主入口标签页 s -->
        <el-tabs
            v-if="$route.meta.isTab"
            v-model="mainTabsActiveName"
            :closable="true"
            @tab-click="selectedTabHandle"
            @tab-remove="removeTabHandle"
        >
            <el-dropdown class="site-tabs__tools" :show-timeout="0">
                <i class="el-icon-arrow-down el-icon--right"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="tabsCloseCurrentHandle">{{ $t('tag.closeCurrent') }}</el-dropdown-item>
                    <el-dropdown-item @click.native="tabsCloseOtherHandle">{{ $t('tag.closeOther') }}</el-dropdown-item>
                    <el-dropdown-item @click.native="tabsCloseAllHandle">{{ $t('tag.closeAll') }}</el-dropdown-item>
                    <el-dropdown-item @click.native="tabsRefreshCurrentHandle">{{ $t('tag.refreshCurrent') }}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-tab-pane
                v-for="item in mainTabs"
                :key="item.name"
                :label="$t('menu.' + item.title)"
                :name="item.name"
            >
                <el-card :body-style="siteContentViewHeight">
                    <iframe
                        v-if="item.type === 'iframe'"
                        :src="item.iframeUrl"
                        width="100%"
                        height="100%"
                        frameborder="0"
                        scrolling="yes"
                    ></iframe>
                    <keep-alive v-else>
                        <router-view v-if="item.name === mainTabsActiveName"/>
                    </keep-alive>
                </el-card>
            </el-tab-pane>
        </el-tabs>
        <!-- 主入口标签页 e -->
        <el-card v-else :body-style="siteContentViewHeight">
            <keep-alive>
                <router-view/>
            </keep-alive>
        </el-card>
		<transition name="el-fade-in">
			<ul
				v-show="contextMenuVisible"
				class="el-dropdown-menu el-popper el-dropdown-menu--medium"
				id="context-menu"
				:style="{ top: contextMenuY + 'px', left: contextMenuX + 'px' }"
			>
				<li class="el-dropdown-menu__item" @click="removeTabHandle(menuTabsActiveName)">{{ $t('tag.closeCurrent') }}</li>
				<li class="el-dropdown-menu__item" @click="contextMenuClick('tabsCloseOtherHandle')">{{ $t('tag.closeOther') }}</li>
				<li class="el-dropdown-menu__item" @click="contextMenuClick('tabsCloseAllHandle')">{{ $t('tag.closeAll') }}</li>
				<li class="el-dropdown-menu__item" @click="contextMenuClick('tabsRefreshCurrentHandle')">{{ $t('tag.refreshCurrent') }}</li>
			</ul>
		</transition>
    </main>
</template>

<style lang="scss">
/* .site-content > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap
	> .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item {
		height: 38px;
		padding: 0 15px;
		line-height: 38px;
		border: 0;
		color: #606266;
} */
.site-content > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item.is-active::after,
.site-content > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item:focus::after,
.site-content > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item:hover::after {
	display: block;
}
#tab-home {
	text-align: center;
  width: 60px;
	>.el-icon-close{ display: none; }
}
#context-menu{
	z-index: 999;
	position: absolute;
	box-shadow: 3px 3px 4px 0 #bbb;
	border: 1px solid #bbb;
}
</style>
<script>
import { isURL } from "@/utils/validate";
export default {
    data() {
        return {
            contextMenuX: "",
            contextMenuY: "",
            contextMenuVisible: false,
            menuTabsActiveName: null
        };
    },
    computed: {
        documentClientHeight: {
            get() {
                return this.$store.state.common.documentClientHeight;
            }
        },
        mainTabs: {
            get() {
                return this.$store.state.common.mainTabs;
            },
            set(val) {
                this.$store.commit("common/updateMainTabs", val);
            }
        },
        mainTabsActiveName: {
            get() {
                return this.$store.state.common.mainTabsActiveName;
            },
            set(val) {
                this.$store.commit("common/updateMainTabsActiveName", val);
            }
        },
        siteContentViewHeight() {
            var height = this.documentClientHeight - 50 - 30 - 2;
            if (this.$route.meta.isTab) {
                height -= 40;
                return isURL(this.$route.meta.iframeUrl)
                    ? { height: height + "px" }
                    : { minHeight: height + "px" };
            }
            return { minHeight: height + "px" };
        }
    },
    created() {
        this.fixedHome();
    },
    mounted() {
		// 添加右键菜单功能
        let tabsNav = document.getElementsByClassName("el-tabs__nav")[0];
        let tabsHeader = document.getElementsByClassName("el-tabs__header")[0];
        let contextMenu = document.getElementById("context-menu");
        tabsNav.oncontextmenu = e => {
            this.menuTabsActiveName = e.target.id.slice(4);
            this.contextMenuY = e.offsetY;
            this.contextMenuX = e.pageX - tabsHeader.offsetLeft;
            this.contextMenuVisible = true;
            return false;
		};
		tabsHeader.oncontextmenu = e => { return false }
        document.onclick = e => {
            this.contextMenuVisible = false;
        };
    },
    methods: {
		// contextmenu click 右键菜单点击
		contextMenuClick (methodName) {
			if (this.menuTabsActiveName) this.mainTabsActiveName = this.menuTabsActiveName;
			if (methodName) this[methodName]();
		},
        // 固定 home 页
        fixedHome() {
            if (!this.mainTabs[0] || this.mainTabs[0].name !== "home") {
                let home = {
                    iframeUrl: "",
                    menuId: "home",
                    name: "home",
                    title:　"home",
                    type: "module"
                };
                // 存储状态不支持 unshift 操作
                let tmp = this.mainTabs.concat();
                tmp.unshift(home);
                this.mainTabs = tmp;
            }
        },
        // tabs, 选中tab
        selectedTabHandle(tab) {
            tab = this.mainTabs.filter(item => item.name === tab.name);
            if (tab.length >= 1) {
                this.$router.push({ name: tab[0].name });
                let id = this.$route.meta.parentId;
                if (id && id != -1) {
                    this.$store.commit("common/updateTopMenuActiveId", id);
                }
            }
        },
        // tabs, 删除tab
        removeTabHandle(tabName) {
            if (tabName === "home") return;
            this.mainTabs = this.mainTabs.filter(item => item.name !== tabName);
            if (this.mainTabs.length >= 1) {
                // 当前选中tab被删除
                if (tabName === this.mainTabsActiveName) {
                    this.$router.push(
                        { name: this.mainTabs[this.mainTabs.length - 1].name },
                        () => {
                            this.mainTabsActiveName = this.$route.name;
                        }
                    );
                }
            } else {
                this.$router.push({ name: "home" });
            }
        },
        // tabs, 关闭当前
        tabsCloseCurrentHandle() {
            this.removeTabHandle(this.mainTabsActiveName);
        },
        // tabs, 关闭其它
        tabsCloseOtherHandle() {
            this.mainTabs = this.mainTabs.filter(
                item => item.name === this.mainTabsActiveName
            );
            this.fixedHome();
        },
        // tabs, 关闭全部
        tabsCloseAllHandle() {
            this.mainTabs = [];
            this.$router.push({ name: "home" });
            this.fixedHome();
        },
        // tabs, 刷新当前
        tabsRefreshCurrentHandle() {
            var tempTabName = this.mainTabsActiveName;
            this.removeTabHandle(tempTabName);
            this.$nextTick(() => {
                this.$router.push({ name: tempTabName });
            });
        }
    }
};
</script>

